<template>
    <!-- 在线客服 -->
    <view class="diy-service" :style="'right: ' + itemStyle.right + '%; bottom: ' + itemStyle.bottom + '%;'">
        <!-- 拨打电话 -->
        <block v-if="params.type == 'phone'">
            <form @submit="_onServiceEvent">
                <button formType="submit" class="btn-normal">
                    <view class="service-icon">
                        <image class="image" :src="params.image"></image>
                    </view>
                </button>
            </form>
        </block>
        <!-- 在线聊天 -->
        <block v-else-if="params.type == 'chat'">
            <button open-type="contact" class="btn-normal">
                <view class="service-icon">
                    <image class="image" :src="params.image"></image>
                </view>
            </button>
        </block>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {};
    },
    options: {
        addGlobalClass: true
    },
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemIndex: String,
        itemStyle: Object,
        params: Object
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        /**
         * 点击拨打电话
         */
        _onServiceEvent(e) {
            // 记录formid
            app.saveFormId(e.detail.formId); // 拨打电话

            uni.makePhoneCall({
                phoneNumber: this.params.phone_num
            });
        }
    }
};
</script>
<style lang="scss">
/* common.wxss */
/* @import "../../../utils/common.scss"; */

/* 在线客服 */

.diy-service {
    position: fixed;
    z-index: 999;
}

.diy-service .service-icon {
    padding: 10rpx;
}

.diy-service .service-icon .image {
    display: block;
    width: 90rpx;
    height: 90rpx;
}
</style>
